<template>
  <div style="background: #FFF;margin-top: -25px;padding: 10px;">
    <div style="text-shadow: 3px 5px 5px #656B79;text-align: center;
font-size: 30px;padding: 10px 0">大数据美食推荐系统
    </div>
    <a-carousel :autoplay="true">
      <div :key="count" v-for="count in 9">
        <div style="display: flex;justify-content: center;height: 500px;">
          <img style="box-shadow: 10px 10px 5px #888888;" height="450px" :src="`static/img/ms${count}.jpg`">
        </div>
      </div>
    </a-carousel>
    <a-row :gutter="10">
      <a-col v-for="(item, index) in likeFood" :span="6" :key="index">
        <a-card hoverable style="width: 100%;margin-bottom: 10px;">
          <img
            alt="example"
            :src="item.image"
            slot="cover"
            style="height: 180px"
          />
          <a-card-meta :title="item.itemName">
            <template slot="description">{{item.remark}}</template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  export default {
    name: 'HomePage',
    data() {
      return {
        likeFood: []
      }
    },
    methods: {},
    mounted() {
      this.$get(`index/test`).then((r) => {
        console.log('登录成功')
      }).catch((r) => {
        console.log('重新登录')
      })

      this.$get('item/user/like', {
        pageSize: 10,
        pageNum: 1,
        itemName: '',
        systemUserId: 18
      }).then((r) => {
        console.log(r.data.rows)
        this.likeFood = r.data.rows
      })
    }
  }
</script>
<style scoped>
  * {
    backgournd: #FFF;
  }

  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    /*line-height: 160px;*/
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>
